﻿<!--
    
 @Name：不落阁整站模板源码
 @Author：Absolutely
 @Site：http://www.lyblogs.cn

 -->

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>relative-个人博客</title>
    <link href="LayuiBlog/images/favicon.ico"  rel="icon" type="image/x-icon" />
    <link rel="shortcut icon" href="LayuiBlog/images/favicon.ico" type="image/x-icon">
    <!--Layui-->
    <link href="LayuiBlog/plug/layui/css/layui.css" rel="stylesheet" />
    <!--font-awesome-->
    <link href="LayuiBlog/plug/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!--全局样式表-->
    <link href="LayuiBlog/css/global.css" rel="stylesheet" />
    <!--本页样式表-->
    <link href="LayuiBlog/css/article.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
</head>
<body>
    <!-- 导航 -->
    <nav class="blog-nav layui-header">
        <div class="blog-container">
            <!-- QQ互联登陆 -->
            <!--            <a href="javascript:;" class="blog-user">-->
            <!--            <i class="fa fa-qq" >登录</i>-->
            <!--            </a>-->

            <!--            <a href="javascript:;" class="blog-user layui-hide">-->
            <!--                <img src="../images/Absolutely.jpg" alt="Absolutely" title="Absolutely" />-->
            <!--            </a>-->
            <!-- 不落阁 -->
            <a class="blog-logo" href="/home">relative</a>
            <!-- 导航菜单 -->
            <ul class="layui-nav" lay-filter="nav">
                <li class="layui-nav-item ">
                    <a href="/home"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="/article"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/resource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/timeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
                </li>
                <li class="layui-nav-item adminUserCss" style="float: right">
                    <a href="/register">注册</a>
                </li>
                <li class="layui-nav-item adminUserCss" style="float: right">
                    <a href="/login">登录</a>
                </li>
            </ul>


            <!-- 手机和平板的导航开关 -->
            <a class="blog-navicon" href="javascript:;">
                <i class="fa fa-navicon"></i>
            </a>
        </div>
    </nav>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="home.html" title="网站首页">网站首页</a>
                <a><cite>文章专栏</cite></a>

            </blockquote>
            <div class="blog-main">
                <div class="blog-main-left">
                    <div class="article shadow " th:each="blog:${blogs.getList()}">
                        <div class="article-left">
                            <img th:src="${blog.getFirstPicture()}" th:alt="${blog.getTitle()}" />
                        </div>
                        <div class="article-right">
                            <div class="article-title">
                                <a  th:text="${blog.getTitle()}" th:href="@{/detailBlog/{id}(id=${blog.getId()})}" style="font-weight: bolder;">基于laypage的layui扩展模块（pagesize.js）！</a>
                            </div>
                            <div class="article-abstract" th:text="${blog.getDescription()}">
                                该模块主要是针对当前版本laypage没有页容量控制功能而制作，使用该模块后即可实现每页显示多少条数据的控制！本人原创，但是可能有可能只对本人的分页写法有用！
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="article-footer">
                            <i class="fa fa-clock-o"></i>
                            <span th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd HH:mm:ss')}"></span>

                            <i class="fa fa-user"></i>
                            <a href="" th:href="@{/home}">
                                <span class="article-author" th:text="${blog.getUser().getUsername()}" >Absolutely</span>
                            </a>
                            <span></span>
                            <i class="fa fa-paper-plane-o" ></i>
                            <span>&nbsp;<a  th:text="${blog.getCategory().getCategoryname()}">Web前端</a></span>

                            <i class="fa fa-tags" ></i>
                            <span>&nbsp;<a  th:text="${blog.getTagIds()}">Web前端</a></span>

                            <i class="fa fa-eye article-viewinfo">
                                <span class="article-viewinfo" th:text="${blog.views}"></span>
                            </i>
                            <i class="fa fa-commenting article-viewinfo">
                                <span class="article-viewinfo" th:text="${blog.getCommentnum()}">renshu</span>
                            </i>
                        </div>
                    </div>
                    <!-- 分页-->
                    <div class="page" style="text-align: center;">
<!--                        <a class="layui-btn layui-btn-sm" data-page="0" th:href="@{/article(pageNum=${blogs.isHasPreviousPage()}?${blogs.prePage}:1)}">上一页</a>-->
<!--                        <a href="" th:href="@{/(pageNum=1)}" class="layui-btn layui-btn-primary" >1</a>-->
<!--                        <a href="" th:href="@{/(pageNum=2)}" class="layui-btn layui-btn-primary">2</a>-->
<!--                        <a href="" th:href="@{/article(pageNum=${blogs.isHasNextPage()}?${blogs.nextPage}:${blogs.pages})}" class="layui-btn layui-btn-sm">下一页</a>-->
                        <span class="layui-btn layui-btn-primary"><b th:text="'共'+${blogs.getPages()}+ ' 页'"></b></span>
                        <a class="layui-btn layui-btn-sm" data-page="0"
                           th:if="${blogs.hasPreviousPage}"
                           th:href="@{/article(pageNum=${blogs.isHasPreviousPage()}?${blogs.prePage}:1)}">上一页</a>
                        <a th:if="${blogs.getPages()} gt 0" th:href="@{'article?pageNum=' + ${i}}"  th:each="i :${#numbers.sequence(1, blogs.getPages())}" th:text="${i}"  th:class="${blogs.getPageNum() == i}? 'curPage layui-btn layui-btn-primary' :'layui-btn layui-btn-primary' "></a>
                        <a href="" th:href="@{/article(pageNum=${blogs.isHasNextPage()}?${blogs.nextPage}:${blogs.pages})}"
                           class="layui-btn layui-btn-sm">下一页</a>
                    </div>
                </div>
                <div class="blog-main-right">
                    <div class="blog-search">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="search-keywords  shadow">
                                    <input type="text" name="keywords" lay-verify="required" placeholder="输入关键词搜索" autocomplete="off" class="layui-input">
                                </div>
                                <div class="search-submit  shadow">
                                    <a class="search-btn" lay-submit="formSearch" lay-filter="formSearch"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="article-category shadow" >
                        <div class="article-category-title">分类导航</div>
                        <a href="javascript:layer.msg(&#39;切换到相应分类&#39;)" th:href="@{/category(categoryname=${category.getCategoryname()})}" th:each="category:${categoryList}" th:text="${category.getCategoryname()}">ASP.NET MVC</a>
                        <div class="clear"></div>
                    </div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">我的推荐</div>
                        <ul class="fa-ul blog-module-ul" th:each="blog:${blogListNoFenYe}">
                            <li th:if="${blog.getViews()} >=100"><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html" th:if="${blog.getRecommend()} eq 1 " th:text="${blog.getTitle()}"  th:href="@{/detailBlog/{id}(id=${blog.getId()})}">Web安全之跨站请求伪造CSRF</a></li>
                        </ul>
                    </div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">随便看看</div>
                        <ul class="fa-ul blog-module-ul" th:each="blog:${blogListNoFenYe}">
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html" th:text="${blog.getTitle()}" th:href="@{/detailBlog/{id}(id=${blog.getId()})}">一步步制作时光轴（一）（HTML篇）</a></li>

                        </ul>
                    </div>
                    <!--右边悬浮 平板或手机设备显示-->
                    <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="blog-footer">
<!--        <p><span>Copyright</span><span>&copy;</span><span>2017</span><a href="http://www.lyblogs.cn">不落阁</a><span>Design By LY</span></p>-->
<!--        <p><a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备16029915号-1</a></p>-->
    </footer>
    <!--侧边导航-->
    <ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
        <li class="layui-nav-item">
            <a th:href="@{/home}"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
        </li>
        <li class="layui-nav-item layui-this">
            <a th:href="@{/article}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/resource}"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{timeline}"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/about}"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
        </li>
    </ul>
    <!--分享窗体-->
    <div class="blog-share layui-hide">
        <div class="blog-share-body">
            <div style="width: 200px;height:100%;">
                <div class="bdsharebuttonbox">
                    <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                    <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                    <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                </div>
            </div>
        </div>
    </div>
    <!--遮罩-->
    <div class="blog-mask animated layui-hide"></div>
    <div class="demo">
        <div id="player">
        </div>
    </div>
    <!-- layui.js -->
    <script src="LayuiBlog/plug/layui/layui.js"></script>
    <!-- 全局脚本 -->
    <script src="LayuiBlog/js/global.js"></script>

    <script src="LayuiBlog/js/BGM.js"></script>

</body>
</html>